<template>
	<view>
		<image mode="widthFix" src="../../static/background.png" class="headBg"></image>
		<view class="header">
			<view class="userInfo">
				<view class="">10</view>
				<view class="share">
					<image src="../../static/icon_achievement2x.png"></image>分享成就
				</view>
			</view>
			<view class="subtitle">我的学分<text>|</text>坚持学习1天</view>
		</view>

		<view class="calendars">
			<uni-calendar :selected="info.selected" :showMonth="false" @change="change" @monthSwitch="monthSwitch" />
		</view>

		<view class="studyBox">
			<view>每日任务</view>
			<view class="taskList">
				<view class="flex_center">
					<view class="taskImg">
						<image src="../../static/img_01x.png"></image>
					</view>
					<view class="ml_20">
						<view>分享学习卡片</view>
						<view class="color_9d fs_28">每日可累计获得6个学分</view>
						<view class="color_yellow fs_28">学分+2/人</view>
					</view>
				</view>
				<view>
					<button class="btn">去分享</button>
					<view class="color_91 fs_24 mt_10 text_center">已领取0/6</view>
				</view>
			</view>

			<view class="taskList">
				<view class="flex_center">
					<view class="taskImg">
						<image src="../../static/img_02x.png"></image>
					</view>
					<view class="ml_20">
						<view>每日福利</view>
						<view class="color_9d fs_28">进入学习日历即可领取</view>
						<view class="color_yellow fs_28">学分+2/人</view>
					</view>
				</view>
				<view>
					<button class="btn">去学习</button>
				</view>
			</view>

			<view class="taskList">
				<view class="flex_center">
					<view class="taskImg">
						<image src="../../static/img_03x.png"></image>
					</view>
					<view class="ml_20">
						<view>学习时长兑换</view>
						<view class="color_9d fs_28">当天听课5分钟以上</view>
						<view class="color_yellow fs_28">学分+2/人</view>
					</view>
				</view>
				<view>
					<button class="btn">去学习</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSection from '@/components/uni-section/uni-section.vue'
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	export default {
		components: {
			uniSection,
			uniCalendar
		},
		data() {
			return {
				info: {
					selected: []
				}
			}
		},
		onReady() {
			// TODO 模拟请求异步同步数据
			setTimeout(() => {
				this.info.selected = [{
						date: '2019-08-20',
						info: '打卡'
					},
					{
						date: '2019-08-21',
						info: '签到',
						data: {
							custom: '自定义信息',
							name: '自定义消息头'
						}
					},
					{
						date: '2019-08-22',
						info: '已打卡'
					}
				]
			}, 500)
		},
		methods: {
			change(e) {
				console.log('change 返回:', e)
				// 模拟动态打卡
				if (this.info.selected.length > 5) return
				this.info.selected.push({
					date: e.fulldate,
					info: '打卡'
				})
			},
			monthSwitch(e) {
				console.log('monthSwitchs 返回:', e)
			}
		}
	}
</script>

<style>
	.headBg {
		width: 100%;
		height: 140rpx;
		position: absolute;
	}

	.header {
		padding: 30rpx;
		position: relative;
	}

	.userInfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
	}

	.userInfo view:first-child {
		font-size: 80rpx;
	}

	.share {
		background-color: #3D53F1;
		padding: 15rpx 30rpx;
		border-radius: 70rpx;
	}

	.share image {
		width: 32rpx;
		height: 40rpx;
		vertical-align: middle;
		margin-right: 10rpx;
	}

	.subtitle {
		color: #fff;
	}

	.subtitle text {
		margin: 0 10rpx;
	}

	.studyBox {
		background: #fff;
		margin: 0 30rpx;
		border-radius: 10rpx;
		padding: 30rpx;
		box-shadow: 0 10rpx 10rpx -10rpx #ddd;
		z-index: 9;
	}

	.taskList {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.studyBox .taskList:last-child {
		border-bottom: 0;
	}

	.taskImg image {
		width: 88rpx;
		height: 88rpx;
	}

	.color_yellow {
		color: #FFB81C;
	}

	.btn {
		background-color: #FF5931;
		border-radius: 50rpx;
		color: #fff;
		line-height: 2;
		font-size: 30rpx;
	}
	/* 日历 */
	.calendars{
		position: relative;
		margin: 0 30rpx 30rpx;
	}
	>>>.uni-calendar__content{
		border-radius: 20rpx !important;
	}
</style>
